<template>
    <div>
        <el-table :data="GroundingParkings" style="width: 100%">
            <el-table-column label="地址">
                <template slot-scope="scope">
                    {{ scope.row.address }}
                    <!-- <img :src="'http://localhost:3000/images/'" alt="" /> -->
                </template>
            </el-table-column>
            <el-table-column label="车位号">
                <template slot-scope="scope">
                    {{ scope.row.number }}
                </template>
            </el-table-column>
            <el-table-column prop="property" label="产权信息">
            </el-table-column>
            <el-table-column prop="cycle" label="出租周期"> </el-table-column>
            <el-table-column prop="price" label="车位信息"> </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <!-- 用函数判断订单状态 -->
                    {{ state(scope.row.state) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        v-if="scope.row.state == 2"
                        @click="grounding(scope.row._id)"
                        >上架</el-button
                    >
                    <el-button
                        v-if="(scope.row.state == 4) | (scope.row.state == 5)"
                        type="info"
                        disabled
                        >上架</el-button
                    >
                    <el-button
                        type="primary"
                        v-if="scope.row.state == 4"
                        @click="undercarriage(scope.row._id)"
                        >下架</el-button
                    >
                    <el-button
                        v-if="(scope.row.state == 2) | (scope.row.state == 5)"
                        type="info"
                        disabled
                        >下架</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("parkings");
const {
    mapActions: lessorsActions,
    mapState: lessorsState,
} = createNamespacedHelpers("lessors");
export default {
    async mounted() {
        // 调用验证是否携带token的函数并且拿到用户数据
        const lessorsData = await this.isLogin();
        // 获取出租方的车位信息;
        this.getParkings({ lessorsId: lessorsData[0]._id });
    },
    methods: {
        ...mapActions(["getParkings", "getParkingsId", "updateParkings"]),
        ...lessorsActions(["isLogin"]),
        // 状态绘制
        state(state) {
            if (state == 2) {
                return "未上架";
            } else if (state == 4) {
                return "已上架";
            } else if (state == 5) {
                return "已出租";
            }
        },
        // 上架
        async grounding(id) {
            // 获取车位信息
            const data = await this.getParkingsId({ _id: id });
            // 把车位的状态改成 4 （已上架 未出租）
            data.state = 4;
            // 直接改变车位的状态
            const result = await this.updateParkings({
                ...data,
            });
            if (result.status) {
                console.log(result, "上架成功");
            } else {
                console.log(result, "上架失败");
            }
            this.getParkings({ lessorsId: this.lessorsAccount[0]._id });
        },
        // 下架
        async undercarriage(id) {
            // 获取车位信息
            const data = await this.getParkingsId({ _id: id });
            // 把车位的状态改成 2 （未上架）
            data.state = 2;
            // 直接改变车位的状态
            const result = await this.updateParkings({
                ...data,
            });
            if (result.status) {
                console.log(result, "上架成功");
            } else {
                console.log(result, "上架失败");
            }
            this.getParkings({ lessorsId: this.lessorsAccount[0]._id });
        },
    },
    computed: {
        ...mapState(["GroundingParkings"]),
        ...lessorsState(["lessorsAccount"]),
    },
};
</script>

<style>
</style>